<template>
    <el-dialog
        title="收货地址"
        :visible.sync="dialogFormVisible"
        :show-close="false"
    >
        <el-form :model="form">
            <el-form-item label="标题" :label-width="formLabelWidth">
                <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="内容" :label-width="formLabelWidth">
                <el-input v-model="form.content" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="作者" :label-width="formLabelWidth">
                <el-input v-model="form.author" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('close')">取 消</el-button>
            <el-button type="primary" @click="Submit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: ['dialogFormVisible', 'formModel'],
    watch: {
        dialogFormVisible() {
            if (this.dialogFormVisible === false) {
                this.form = {
                    title: '',
                    content: '',
                    author: '',
                }
            }
        },
        formModel() {
            
            if (this.formModel) {
                // 编辑
                const { title, content, author } = this.formModel
                this.form.title = title
                this.form.content = content
                this.form.author = author
            } else {
                // 新增
            }
        },
    },
    data() {
        return {
            form: {
                title: '',
                content: '',
                author: '',
            },
            formLabelWidth: '120px',
        }
    },
    methods: {
        Submit() {
            if(this.formModel) {
                 this.$api.editList({
                     ...this.form,
                     id: this.formModel.id
                 }).then((res) => {
                    if (res.code === 1) {
                        this.$emit('close')
                        this.$emit('update')
                        this.form = {
                            title: '',
                            content: '',
                            author: '',
                        }
                    }
                })
            } else {
                 this.$api.addList(this.form).then((res) => {
                    if (res.code === 1) {
                        this.$emit('close')
                        this.$emit('update')
                        this.form = {
                            title: '',
                            content: '',
                            author: '',
                        }
                    }
                })
            }
           
        },
    },
}
</script>

<style>
</style>